<template>
  <div>
    <!-- <h1>这是子应用vue3</h1>
    <button @click="getChildProps">主应用获取子应用的数据</button> -->
    <!-- 子应用直接使用wujie组件 -->
    <!-- 子应用是vue3 -->
    <WujieVue name="vue3" :url="vueUrl" :props="{ name: 'vue3', info: '测试通信方式1' }"></WujieVue>
  </div>
</template>

<script setup lang="ts">
import WujieVue from 'wujie-vue3'
import { onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

const { bus } = WujieVue
const route = useRoute()

// 这个地方记得在index.html中引入public下config.js文件
// const vueUrl = window.globalConfig.vueUrl

// 这个地方，如果路由有参数，记得在这个地方加上对应参数，否则初次跳转到子应用页面内容不正确
const vueUrl = window.globalConfig.vueUrl + route.params.path


watch(() => route.params.path, () => {
  bus.$emit('vue3-router-change', `/${route.params.path}`)
}, {
  immediate: true
})


// 测试传参
// window.globalName = '我是主应用'

// 主应用获取子应用的全局参数
// const getChildProps = () => {
//   console.log(window.document.querySelector("iframe[name=vue3]")?.contentWindow?.childVueName)
// }
// 使用eventBus测试传参
// onMounted(() => {
//   bus.$on('doHandler', (...args: any[]) => {
//     console.log(args)
//   })
// })
</script>

<style scoped>

</style>